<template>
    <a-modal class="take-order-modal" title="取单" :width="820" :visible="true" cancel-text="取消[Esc]" ok-text="确认[Enter]" @ok="handleOk"
        @cancel="handleCancel">
        <a-table bordered ref="tableRef" :rowClassName="(record, index) => {
            return state.current === index ? 'active-row' : '';
        }" :columns="columns" :dataSource="commonStore.$state.cartDataList" :pagination="false" :scroll="{ y: 400 }">
            <template #bodyCell="{ record, column }">
                <template v-if="column.dataIndex == 'realName'">
                    {{ record.memberData?.realName }}
                </template>
                <template v-if="column.dataIndex == 'mobile'">
                    {{ record.memberData?.mobile }}
                </template>
                <template v-if="column.dataIndex == 'goodsName'">
                    {{ record.dataSource.map((goods) => goods.goodsName)?.join(",") }}
                </template>
            </template>
        </a-table>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive, onMounted, onBeforeUnmount, nextTick, ref } from "vue";
import { message } from "ant-design-vue";
import { CommonStore } from "@/store"

const state = reactive<{
    current: number;
}>({
    current: 0
})

const commonStore = CommonStore();
const tableRef = ref()

const columns = [
    { title: "客户姓名", dataIndex: "realName" },
    { title: "手机", dataIndex: "mobile" },
    { title: "下单商品", dataIndex: "goodsName" },
    { title: "创建时间", dataIndex: "createTime" },
]


const emit = defineEmits<{
    (e: "ok", value: any): void,
    (e: "cancel"): void
}>()

onMounted(async () => {
    window.addEventListener("keydown", handleKeydown)
})

onBeforeUnmount(() => {
    window.removeEventListener("keydown", handleKeydown)
})

const handleKeydown = (e: any) => {
    const cartDataList = commonStore.$state.cartDataList
    e.preventDefault();
    const code = e.code;
    if (code === "ArrowDown") {
        state.current++;
        if (state.current > cartDataList.length - 1) state.current = 0;
    } else if (code === "ArrowUp") {
        state.current--;
        if (state.current < 0) state.current = cartDataList.length - 1;
    } else if (code === "Enter" || code === "NumpadEnter") {
        handleOk();
        return
    } else if (code === "Esc") {
        handleCancel();
        return
    }

    nextTick(() => {
        let pos = (document.querySelector(".active-row") as HTMLDivElement).getBoundingClientRect();
        const tableBody = tableRef.value.$el.querySelector(".ant-table-body");
        let tablePos = tableBody.getBoundingClientRect();


        let scrollTop = pos.top + pos.height + tableBody.scrollTop - tablePos.top - tablePos.height;
        tableBody.scrollTop = scrollTop > 0 ? scrollTop : 0
    })
}



const handleOk = () => {
    let val = commonStore.$state.cartDataList.splice(state.current,1);
    if (val && val.length) {
        emit("ok", val[0]);
    } else {
        return message.error("没有选择订单")
    }

}

const handleCancel = () => {
    emit("cancel");
}

</script>

<style lang="less" >
.take-order-modal .ant-table-row.active-row {
    .ant-table-cell {
        border-top: 2px solid #7546c9;
        border-bottom: 2px solid #7546c9;
        background-color: lighten(#7546c9, 40)
    }
}
</style>